<template>
  <view class="xingcheng-container">

    <myLoading v-if="isLoading"></myLoading>

    <template v-else>

      <!-- 筛选区域 -->
      <view class="filter-section">
        <view class="filter-item" @click="showOrderTypePicker">
          <text style="margin-left: 80rpx;" class="filter-text selected">{{orderTypes.find(type =>
            type.value ===
            selectedOrderType)?.label || '全部订单'
            }}</text>
          <uni-icons class="filter-icon" type="down" size="16" color="#666666"></uni-icons>
        </view>
        <view class="filter-item" @click="showDatePicker">
          <text style="margin-left: 50rpx;" class="filter-text selected">{{ dateTime }}</text>
          <uni-icons class="filter-icon" type="down" size="16" color="#666666"></uni-icons>
        </view>
      </view>

      <!-- 订单类型选择器 - 使用 uni-popup 实现 -->
      <uni-popup ref="orderTypePopup" type="top" :mask-click="true" @mask-click="closeOrderTypePopup">
        <view class="order-type-popup">
          <view class="type-item" v-for="type in orderTypes" :key="type.value" @click="selectOrderType(type.value)">
            <text class="type-text" :class="{ 'selected': selectedOrderType === type.value }">
              {{ type.label }}
            </text>
            <uni-icons v-if="selectedOrderType === type.value" type="success-filled" size="20"
              color="#f98242"></uni-icons>
          </view>
        </view>
      </uni-popup>

      <!-- 行程列表 -->
      <scroll-view scroll-y="true" class="trip-list" refresher-enabled="true" :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" style="height: calc(100vh - 110rpx);">
        <view style="padding: 0 20rpx;background-color: #f2f2f2;">
          <!-- 订单列表按日期分组 -->
          <view v-for="(dateGroup, dateIndex) in orderGroups" :key="dateIndex">
            <view class="date-header">
              <text class="date-text">{{ dateGroup.time }}</text>
            </view>

            <!-- 订单项 -->
            <view style="margin-bottom: 25rpx;border-radius: 20rpx;" class="order-item"
              v-for="(order, orderIndex) in dateGroup.data" :key="orderIndex">
              <!-- 订单时间 -->
              <view class="order-time">
                <text class="time-text">{{ order.tim }}</text>
                <text style="color: #abadac;" class="payment-status">{{ order.zf }}</text>
              </view>

              <!-- 驾驶员信息 -->
              <view class="driver-info">
                <view class="dot green-dot"></view>
                <text class="driver-name">{{ filterDotPrefix(order.qd)
                  }}</text>
              </view>

              <!-- 行程路线 -->
              <view class="route-info">
                <view class="dot red-dot"></view>
                <text class="route-text">{{ filterDotPrefix(order.zd) }}</text>
              </view>

              <!-- 订单标签和价格 -->
              <view class="order-footer">
                <view class="order-tags">
                  <text v-for="(tag, tagIndex) in order.qud" :key="tagIndex" :class="{ 'ftag': tagIndex == 0 }"
                    style="border: 1px solid #abadac; ;" class="tag">{{ tag }}</text>
                </view>
                <text v-if="order.pay && order.pay != '-'" class="order-price">{{ order.pay }}元</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 空状态 -->
        <view class="empty-state" style="width: 100%;" v-if="orderGroups.length === 0 && !isLoading">
          <image src="/static/29.jpg" mode="widthFix" style="width: 100%;margin-bottom: 20rpx;">
          </image>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="isLoadingMore">
          <text class="load-more-text">加载中...</text>
        </view>
        <view class="load-more" v-if="!hasMore && orderGroups.length > 0">
          <text class="load-more-text">没有更多了</text>
        </view>
      </scroll-view>


    </template>


    <!-- 日期选择器 - 使用uni-app推荐的方式实现 -->
    <uni-popup ref="datePicker" type="top" :mask-click="true" @mask-click="closeDatePicker">
      <view class="picker-container">
        <!-- 日期选择内容 - 左侧年份，右侧月份 -->
        <view class="date-picker-content">


          <view style="width: 100%; height: 400rpx; background-color: #ffffff;">
            <picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange"
              style="width: 100%; height: 400rpx;">
              <picker-view-column>
                <view
                  style="line-height: 100rpx; text-align: center;display: flex;align-items: center;justify-content: center;"
                  v-for="(item, index) in years" :key="index">{{
                    item }}</view>
              </picker-view-column>
              <picker-view-column>
                <view
                  style="line-height: 80rpx; text-align: center;display: flex;align-items: center;justify-content: center;"
                  v-for="(item, index) in months" :key="index">{{
                    item }}</view>
              </picker-view-column>
            </picker-view>
          </view>






        </view>

        <!-- 底部按钮 -->
        <view class="date-picker-buttons">
          <button style="border: 1px solid #fc731e;color: #fc731e;" class="cancel-button"
            @click="closeDatePicker">取消</button>
          <button style="background-color: #fc731e;color: #ffffff;" class="confirm-button"
            @click="confirmDatePicker">确定</button>
        </view>
      </view>
    </uni-popup>


  </view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
import uniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue'
export default {
  components: {
    uniIcons,
    uniPopup,
    uniCalendar,
    uniDateformat
  },
  data() {
    return {
      statusBarHeight: 0,
      showOrderTypeDropdown: false,
      isDatePickerVisible: false,
      // 按日期分组的订单列表
      orderGroups: [],
      orderTypes: [
        { label: '全部订单', value: '全部订单' },
        { label: '未支付', value: '未支付' },
        { label: '已取消', value: '已取消' },
        { label: '待出行', value: '待出行' }
      ],
      selectedOrderType: '全部订单',
      selectedDate: '2024全年',
      selectedYear: '2024',
      selectedMonth: '全年',
      years: ['2020年', '2021年', '2022年', '2023年', '2024年', '2025年'],
      months: [
        '全年', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
      ],
      indicatorStyle: `height: 50px;`,
      // 新增用于数据驱动的滚动位置和高亮状态
      yearScrollTop: 0,
      monthScrollTop: 0,
      currentHighlightYear: '2024',
      currentHighlightMonth: '全年',
      scrollTimer: null,
      // 选项高度，用于计算滚动位置，与CSS中定义的100rpx保持一致
      itemHeight: 100,
      year: '2025年',
      month: '全年',
      dateTime: '2025年全年',
      value: [9999, 0],
      isLoading: true,
      // 分页相关数据
      pageIndex: 1,
      pageSize: 10,
      totalPages: 1,
      isRefreshing: false,
      isLoadingMore: false,
      hasMore: true,
      // 请求参数
      requestParams: {
        index: 1,
        size: 5,
        to: 'hdasdkhshnadsgdhujakduiosn',
        mon: '',
        zf: '0'
      }
    }
  },
  async onLoad() {
    // 页面加载时获取数据
    await this.loadTripData();

    // 定义一个0.3-1的随机数
    let randomNum = Math.random() * 0.7 + 0.3;
    // 转换为毫秒
    let randomDelay = randomNum * 1000;
    // 延迟执行
    setTimeout(() => {
      this.isLoading = false;
    }, randomDelay);
  },
  async onShow() {
    // 页面显示时刷新数据
    if (this.orderGroups.length === 0) {
      await this.loadTripData();
    }

    // 页面加载时显示加载状态，0.3-1秒后隐藏
    const loadingTime = Math.floor(Math.random() * 700) + 300 // 生成300-1000毫秒的随机时间
    setTimeout(() => {
      this.isLoading = false;
    }, loadingTime);
  },
  created() {
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 初始化日期选择器的当前值
    this.year = '2024年';
    this.month = '全年';
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    bindChange(e) {
      const val = e.detail.value
      this.year = this.years[val[0]]
      this.month = this.months[val[1]]
    },
    // 加载行程数据
    async loadTripData() {
      try {
        // 格式化日期字符串
        const formattedDateTime = this.formatDateString(this.dateTime);
        
        const params = {
          index: this.pageIndex,
          size: this.pageSize,
          to: 'hdasdkhshnadsgdhujakduiosn',
          mon: formattedDateTime,
          zf: this.selectedOrderType == '全部订单' ? '' : this.selectedOrderType,
        };

        const response = await uni.request({
          url: 'http://121.229.145.213:30799/fortest/selbypage',
          method: 'POST',
          data: params,
          header: {
            'Content-Type': 'application/json'
          }
        });

        console.log(params, 'params')

        if (response.data.code == '0000') {
          // const { data, total } = response.data;
          let total = response.data.data.page.total
          let data = response.data.data.result
          this.totalPages = Math.ceil(total / this.pageSize);

          const isLoadMore = this.pageIndex > 1;
          this.orderGroups = this.formatOrderData(data, isLoadMore);

          this.hasMore = this.pageIndex < this.totalPages;
        } else {
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('加载行程数据失败:', error);
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        });
      }
    },



    // 过滤函数：去掉开头的"·"
    filterDotPrefix(str) {
      if (typeof str === 'string' && str.startsWith('·')) {
        return str.substring(1);
      }
      return str;
    },
    
    // 格式化日期字符串
    formatDateString(dateStr) {
      if (!dateStr || typeof dateStr !== 'string') {
        return dateStr;
      }
      
      // 处理 "2025年1月" 格式 -> "2025年01月"
      if (dateStr.match(/^\d{4}年\d{1,2}月$/)) {
        const match = dateStr.match(/^(\d{4})年(\d{1,2})月$/);
        if (match && match[2].length === 1) {
          return `${match[1]}年0${match[2]}月`;
        }
      }
      
      // "2025年全部" 和 "2025年10月" 这种格式保持不变
      if (dateStr.match(/^\d{4}年全部$/) || dateStr.match(/^\d{4}年\d{2}月$/)) {
        return dateStr;
      }
      
      return dateStr;
    },

    // 处理qud字段转换
    processQudField(qud) {
      if (!qud) return [];

      // 如果是字符串，去除方括号并按逗号分割
      if (typeof qud === 'string') {
        let cleanStr = qud.replace(/[\[\]"]/g, ''); // 去除方括号和引号
        return cleanStr.split(',').map(item => item.trim()).filter(item => item);
      }

      // 如果已经是数组，直接返回
      if (Array.isArray(qud)) {
        return qud;
      }

      return [];
    },

    // 格式化订单数据
    formatOrderData(newOrders, isLoadMore = false) {
      if (!newOrders || !Array.isArray(newOrders)) {
        return this.orderGroups;
      }

      // 处理每个订单的qud字段
      const processedOrders = newOrders.map(order => ({
        ...order,
        qud: this.processQudField(order.qud)
      }));

      let resultGroups = [];

      if (isLoadMore && this.orderGroups.length > 0) {
        // 上拉加载更多时，合并到现有数据中
        const existingGroups = JSON.parse(JSON.stringify(this.orderGroups));
        const groupMap = {};

        // 先将现有数据放入map
        existingGroups.forEach(group => {
          groupMap[group.time] = group;
        });

        // 处理新加载的数据
        processedOrders.forEach(order => {
          const time = order.mon || '未知日期';

          if (groupMap[time]) {
            // 如果该mon已存在，直接追加到data数组
            groupMap[time].data.push(order);
          } else {
            // 如果该mon不存在，创建新的分组
            groupMap[time] = {
              time: time,
              data: [order]
            };
          }
        });

        resultGroups = Object.values(groupMap);
      } else {
        // 首次加载或下拉刷新时，重新分组
        const groupedOrders = {};
        processedOrders.forEach(order => {
          const time = order.mon || '未知日期';

          if (!groupedOrders[time]) {
            groupedOrders[time] = {
              time: time,
              data: []
            };
          }
          groupedOrders[time].data.push(order);
        });
        resultGroups = Object.values(groupedOrders);
      }

      return resultGroups;
    },

    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      this.pageIndex = 1;
      this.hasMore = true;

      try {
        await this.loadTripData();
      } catch (error) {
        console.error('刷新失败:', error);
      } finally {
        this.isRefreshing = false;
      }
    },

    // 上拉加载更多
    async onLoadMore() {
      if (this.isLoadingMore || !this.hasMore) return;

      this.isLoadingMore = true;
      this.pageIndex++;

      try {
        await this.loadTripData();
      } catch (error) {
        console.error('加载更多失败:', error);
        this.pageIndex--; // 回退页码
      } finally {
        this.isLoadingMore = false;
      }
    },

    // 显示日期选择器
    showDatePicker() {
      // 确保在打开时设置正确的值
      this.year = this.selectedYear;
      this.month = this.selectedMonth;
      this.$refs.datePicker.open();
    },




    // 关闭日期选择器
    closeDatePicker() {
      this.$refs.datePicker.close();
    },

    // 确认日期选择
    confirmDatePicker() {
      // 组合选择的年份和月份
      this.value = [this.years.indexOf(this.year), this.months.indexOf(this.month)]
      console.log(this.value, 'this.value')
      this.dateTime = this.year + this.month
      
      // 应用日期格式化
      this.dateTime = this.formatDateString(this.dateTime)
      
      this.orderGroups = []
      this.pageIndex = 1
      this.loadTripData()
      this.$refs.datePicker.close();
    },

    // 显示订单类型选择器
    showOrderTypePicker() {
      this.$refs.orderTypePopup.open();
    },

    // 关闭订单类型选择器
    closeOrderTypePopup() {
      this.$refs.orderTypePopup.close();
    },

    // 选择订单类型
    selectOrderType(type) {
      // if(type == this.selectedOrderType){
      //   return this.$refs.orderTypePopup.close();
      // }
      this.selectedOrderType = type;
      this.orderGroups = []
      this.pageIndex = 1
      this.loadTripData()
      this.$refs.orderTypePopup.close();

    },



    // 处理行程操作
    handleAction(tripId, actionType) {
      console.log('处理行程操作:', tripId, actionType);
      switch (actionType) {
        case 'detail':
          // 查看行程详情
          this.goToTripDetail(tripId);
          break;
        case 'review':
          // 评价行程
          this.goToReview(tripId);
          break;
        case 'contact':
          // 联系司机
          this.contactDriver(tripId);
          break;
        default:
          break;
      }
    },

    // 跳转到行程详情
    goToTripDetail(tripId) {
      uni.navigateTo({
        url: `/pages/loading/loading?tripId=${tripId}`
      });
    },

    // 跳转到评价页面
    goToReview(tripId) {
      uni.navigateTo({
        url: `/pages/loading/loading?tripId=${tripId}&action=review`
      });
    },

    // 联系司机
    contactDriver(tripId) {
      // 这里可以调用uni.makePhoneCall等API实现打电话功能
      uni.showToast({
        title: '联系司机功能待实现',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
/* 主容器 */
.xingcheng-container {
  background-color: #f2f2f2;
  min-height: 100vh;
}

/* 顶部导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 80rpx;
  background-color: #ffffff;
  margin-bottom: 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-icon {
  padding: 20rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.nav-right {
  padding: 20rpx;
}

/* 筛选区域 */
.filter-section {
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: #ffffff;
  position: relative;
  border-bottom: none;
}

.filter-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-text {
  font-size: 32rpx;
  color: #f98242;
  font-weight: bold;
}

.filter-icon {
  margin-left: 10rpx;
}

/* 订单类型选择器样式 */
.order-type-picker {
  background-color: #ffffff;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.type-item:last-child {
  border-bottom: none;
}

.type-text {
  font-size: 32rpx;
  color: #333333;
}

.type-text.selected {
  color: #f98242;
  font-weight: bold;
}

/* 订单类型弹窗样式 */
.order-type-popup {
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx 0;
}

.order-type-popup .type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-type-popup .type-item:last-child {
  border-bottom: none;
}

.order-type-popup .type-text {
  font-size: 32rpx;
  color: #333333;
}

.order-type-popup .type-text.selected {
  color: #f98242;
  font-weight: bold;
}

/* 行程列表 */
.trip-list {
  padding: 0;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 100rpx 0; */
}

.empty-text {
  font-size: 32rpx;
  color: #999999;
  margin-top: 30rpx;
}

/* 日期选择器样式 - 根据图片要求优化 */
.picker-container {
  background-color: #ffffff;
  border-radius: 0;
  width: 100%;
  overflow: hidden;
}

/* 调整年份和月份项的内边距，使布局更紧凑 */
.year-scroll-wrapper,
.month-scroll-wrapper {
  padding: 100rpx 0;
  margin: 0;
}

/* 日期选择内容区域 */
.date-picker-content {
  padding: 0;
  display: flex;
  height: 400rpx;
  background-color: #ffffff;
}

/* picker-view 样式 */
.date-picker-view {
  width: 100%;
  height: 300rpx;
  display: flex;
}

/* picker-view-column 样式 */
.date-picker-view>>>picker-view-column {
  flex: 1;
}

/* 年份选择区域 - 左侧 只显示3条滚动选择器 */
.year-selection {
  width: 50%;
  height: 300rpx;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
}

.year-scroll-wrapper {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 100rpx 0;
  /* 确保滚动容器能容纳更多选项 */
  min-height: 300rpx;
}

.year-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background-color: transparent;
}

.year-item text {
  font-size: 34rpx;
  color: #999999;
}

/* 滚动时高亮显示的文字样式 - 加粗黑色 */
.year-item.highlight,
.year-item.highlight text {
  color: #000000;
  font-weight: bold;
  font-size: 36rpx;
}

/* 月份选择区域 - 右侧 只显示3条滚动选择器 */
.month-selection {
  width: 50%;
  height: 300rpx;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
}

.month-scroll-wrapper {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 100rpx 0;
  /* 确保滚动容器能容纳更多选项 */
  min-height: 300rpx;
}

.month-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background-color: transparent;
}

.month-item text {
  font-size: 34rpx;
  color: #999999;
}

/* 滚动时高亮显示的文字样式 - 加粗黑色 */
.month-item.highlight,
.month-item.highlight text {
  color: #000000;
  font-weight: bold;
  font-size: 36rpx;
}

/* 中间选中状态背景 - 整体背景色改为#f5f6f8且不遮挡文字 */
.year-selection::before,
.month-selection::before {
  content: '';
  position: absolute;
  top: 100rpx;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #f5f6f8;
  pointer-events: none;
  z-index: -1;
}

/* 添加顶部遮罩 */
.year-selection::after,
.month-selection::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: linear-gradient(to bottom, #ffffff, transparent);
  pointer-events: none;
  z-index: 1;
}

/* 添加底部遮罩，确保只显示3个选项 */
.year-selection .bottom-mask,
.month-selection .bottom-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: linear-gradient(to top, #ffffff, transparent);
  pointer-events: none;
  z-index: 1;
}

/* 调整滚动条样式，使其更符合移动端体验 */
.year-scroll-wrapper::-webkit-scrollbar,
.month-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* 底部按钮区域 - 根据图片要求优化 */
.date-picker-buttons {
  display: flex;
  padding: 20rpx 30rpx 30rpx 30rpx;
  background-color: #ffffff;
}

.cancel-button,
.confirm-button {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 34rpx;
  margin: 0 10rpx;
  border: none;
}

.cancel-button {
  background-color: #ffffff;
  color: #666666;
}

.confirm-button {
  background-color: #f98242;
  color: #ffffff;
  font-weight: bold;
  border: none;
}

.type-list {
  max-height: 500rpx;
  overflow-y: auto;
}

/* 日期分组标题样式 */
.date-header {
  padding: 15rpx 30rpx;
  background-color: #f2f2f2;
  border-top: 10rpx solid #f0f0f0;
}

.date-text {
  font-size: 28rpx;
  color: #666666;
}

/* 订单项样式 */
.order-item {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  margin-bottom: 0;
  border-radius: 0;
}

/* 订单时间 */
.order-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.time-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.payment-status {
  font-size: 28rpx;
  color: #32cd32;
}

/* 驾驶员信息 */
.driver-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

/* 行程路线 */
.route-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

/* 彩色圆点 */
.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-right: 12rpx;
}

.green-dot {
  background-color: #32cd32;
}

.red-dot {
  background-color: #ff6666;
}

.driver-name {
  font-size: 30rpx;
  color: #333333;
}

.route-text {
  font-size: 28rpx;
  color: #666666;
}

/* 订单标签和价格 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-tags {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
}

.tag {
  font-size: 24rpx;
  color: #666666;
  padding: 4rpx 16rpx;
  color: #5b6681;
  border-radius: 10rpx;
  margin-right: 12rpx;
}

.ftag {
  background-color: #ecf0f3;
}

.order-price {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

/* 优化筛选区域样式 */
.filter-section {
  background-color: #ffffff;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

.filter-item {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 45%;
}

.filter-text {
  font-size: 32rpx;
  color: #f98242;
  font-weight: bold;
}

.filter-icon {
  margin-left: 10rpx;
}



/* 加载更多样式 */
.load-more {
  text-align: center;
  padding: 30rpx 0;
  background-color: #f2f2f2;
}

.load-more-text {
  font-size: 28rpx;
  color: #999999;
}
</style>
